/**
 * Created by DELL on 2017/6/1.
 */

import React, {Component} from 'react';
import {
    StyleSheet,
    Image,
    View,
    TextInput,
    Text,
    Button,
    TouchableHighlight,
    TouchableOpacity,

    TouchableNativeFeedback,
    TouchableWithoutFeedback,
}from 'react-native';


//我的 页

import  BaseComponent, {base,AppIndictor} from '../../base/Base' ;
//import {Router, Route, hashHistory} from 'react-router';


var url_head = require('../../imgs/mine/head.png');//默认头像地址
//var url_rightjiantou = require('../../imgs/mine/rightjiantou.png');//

let {
    N004_USERS$_GET_USER,

} = base.requests;


let {
    USER_INFO,
} = base.fields;


export default class MinePage extends BaseComponent {
    // ES5 写法，不用
    // static defaultProps = {
    //     title: '我的'
    // };

    constructor(props) {
        super(props);
        this.state = {
            nickName: '',
            cellPhone: '',
            gender: '',
            avartUrl: '',

            appIndictor :false,


        };
    };

    //获取用户信息
    getUserInfo() {

        // base.Store.get(USER_INFO)
        //     .then((successData)=>{
        //
        //         console.log(JSON.stringify(successData));
        //         base.toastShort('获取用户信息成功--本地');
        //
        //         this.setState({
        //             nickName:successData.nickName,
        //             cellPhone:successData.cellPhone,
        //             gender:successData.gender,
        //             avartUrl:successData.avartUrl ,
        //         })
        //
        //
        //     });

        this.setState({
            appIndictor:true,
        });
        let params = {};
        //params.platform = base.device.isAndroid()?"Android":"Ios";

        base.network.getUipData(N004_USERS$_GET_USER, params,
            (successData1) => {

                console.log(JSON.stringify(successData));
                //base.toastShort('获取用户信息成功--网络');
                let successData = successData1[0];
                this.setState({
                    nickName: successData.nickName,
                    cellPhone: successData.cellPhone,
                    gender: successData.gender,
                    avartUrl: successData.avartUrl,

                    appIndictor:false,
                });

            },
            (error) => {
                this.setState({
                    appIndictor:false,
                });
                base.toastShort('获取用户信息失败：' + error);
            });


    }

    componentWillMount() {

        this.getUserInfo();
    }


    //页面 跳转
    _skip(page) {
        if (page == "user") {
            this.props.navigation.navigate('User',
                {
                    'nickName': this.state.nickName,
                    'gender': this.state.gender,
                    'avartUrl': this.state.avartUrl,
                     callback:(data1,data2)=>{

                        this.setState({
                            nickName: data1,
                            gender: data2,

                        });
                    }
                });

        } else if (page == "address") {//地址
            this.props.navigation.navigate('Address');
        } else if (page == "order") {//订单

            this.props.navigation.navigate('Tab_Order');

        } else if (page == "feedback") {//反馈
            this.props.navigation.navigate('Feedback');
        } else {//setting 设置
            this.props.navigation.navigate('Setting');
        }

    }

    render() {

        var gender_text = this.state.gender == "1" ? "男" : "女";
        var icon = this.state.avartUrl ? {uri: this.state.avartUrl} : url_head;


            return (
                <View style={ styles.container}>


                    <AppIndictor
                        modalVisible={this.state.appIndictor}
                        size={'large'}
                        color={'#ff6138'}
                    />

                    <View style={ styles.inputRow1}>
                        <TouchableOpacity style={ styles.inputRow1_inner} onPress={this._skip.bind(this, "user")}>

                            <View style={[styles.marginTop20, {marginLeft: 20}]}>
                                <Text style={styles.marginTop20}> 姓名 : {this.state.nickName} </Text>
                                <Text style={styles.marginTop20}> 电话 : {this.state.cellPhone}</Text>
                                <Text style={styles.marginTop20}> 性别 : { gender_text }</Text>

                            </View>

                            <View style={styles.marginTop20}>
                                <Text style={ {marginLeft: 30}}>头像</Text>
                                <Image source={ icon }
                                       style={{width: 100, height: 100, marginRight: 20, marginTop: 10,borderRadius:50,borderColor:'#0aafff'}}/>
                            </View>

                        </TouchableOpacity>

                    </View>

                    <View style={ styles.inputRow2}>

                        <TouchableOpacity style={styles.btn} onPress={this._skip.bind(this, "address")}>
                            <Text style={styles.text}>我的地址</Text>

                        </TouchableOpacity>

                        <View style={styles.line}></View>

                        <TouchableOpacity style={styles.btn} onPress={this._skip.bind(this, "order")}>
                            <Text style={styles.text}>订单管理</Text>

                        </TouchableOpacity>

                        <View style={styles.line}></View>


                        <TouchableOpacity style={styles.btn} onPress={this._skip.bind(this, "feedback")}>
                            <Text style={styles.text}>意见反馈</Text>

                        </TouchableOpacity>

                        <View style={styles.line}></View>


                        <TouchableOpacity style={styles.btn} onPress={this._skip.bind(this, "setting")}>
                            <Text style={styles.text}>我的设置</Text>

                        </TouchableOpacity>
                        <View style={styles.line}></View>
                    </View>
                </View>
            )




    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: "column",
        justifyContent: "flex-start",
        alignItems: "center",

    },
    inputRow1: {
        backgroundColor: '#ffebcd',//'#f5f5f5',
        flexDirection: 'row',
        height: 200,
        width: "100%",
        justifyContent: "center",
        alignItems: "center",
    },
    inputRow2: {
        flex: 3,
        backgroundColor: '#f5f5f5',
        flexDirection: 'column',
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
        width: "100%",
        marginTop: 1,

    },
    inputRow1_inner: {
        backgroundColor: '#fff',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'flex-start',
        height: "90%",
        width: "94%",
    },
    marginTop20: {
        marginTop: 20
    },
    line: {
        backgroundColor: '#DEDEDE',
        height: 1,
        width: '100%',

    },
    btn: {
        //padding: 10,
        backgroundColor: 'cornsilk',
        height: 50,
        width: '100%',
        justifyContent: 'center',

    },
    text: {

        color: '#212121',
        fontSize: 18,
        marginLeft: 20,


    }


});
